<template>
  <n-form ref="formRef" :model="formVal" :rules="rules">
    <n-form-item path="loginname">
      <n-input v-model:value="formVal.loginname" placeholder="学号、工号 | 邮箱 登录" @keyup.enter="handleLogin" />
    </n-form-item>
    <n-form-item path="password">
      <n-input v-model:value="formVal.password" placeholder="请输入密码" type="password" @keyup.enter="handleLogin"
        show-password-on="mousedown" />
    </n-form-item>
    <n-form-item>
      <n-button type="primary" @click="handleLogin" block round>确 定</n-button>
    </n-form-item>
  </n-form>
</template>

<style>
.card-tabs .n-tabs-nav--bar-type {
  padding-left: 4px;
}
</style>

<script setup>
// 引入reactive用于定义响应式变量
import { reactive } from "vue";
// 按需引入请求接口
import { LoginAPI, UserInfoAPI } from '@/http/api/login.js'

// 导入路由
import { useRouter } from 'vue-router'

import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()



// 登录框表单数据
const formVal = reactive({
  loginname: "",
  password: "",
});

// 验证规则
const rules = reactive({
  loginname: {
    required: true,
    trigger: "blur",
    message: "学号、工号 | 邮箱",
  },
  password: {
    required: true,
    trigger: "blur",
    message: "请输入密码",
  },
});

// 处理登录
function handleLogin() {
  LoginAPI(formVal).then(res => {
    const data = res.result;
    // 保存token
    sessionStorage.setItem('token', data.token);
    store.commit('user/SET_TOKEN', data.token)

    delete data.token;

    //保存用户信息
    sessionStorage.setItem('info', JSON.stringify(data));
    store.commit('user/SET_INFO', data)

    // 修改登录框状态
    store.commit('user/SET_LOGINMODAL', false)

    // 跳转路径
    // router.push('/dashboard');
  })
    .catch(err => { })
}
</script>
<style lang="scss" scoped>
.card-tabs .n-tabs-nav--bar-type {
  padding-left: 4px;
}
</style>
